<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>期刊管理</title>
    <!--<script type="text/javascript" src="/libms/lib/js/jquery-3.2.1.min.js"></script>-->
    <!--<script type="text/javascript" src="/libms/lib/js/bootstrap.min.js"></script>-->

    <!--<script src="/libms/lib/layui/layui.js" type="text/javascript"></script>-->
    <!--<link rel="stylesheet" href="/libms/lib/layui/css/layui.css">-->
    <!--<link rel="stylesheet" href="/libms/lib/css/bootstrap.min.css">-->

    <script type="text/javascript" src="../app/js/bookman.js"></script>
    <link rel="stylesheet" href="../app/css/tablegroup.css">
</head>
<body>
<div class="container">
    <div class="tgroup">
        <div class="form form-inline">
            <input class="form-control" type="text" name="" id="bookname" placeholder="名称">
            <input class="form-control" type="text" name="" id="author" placeholder="作者">
            <input class="form-control" type="text" name="" id="publisher" placeholder="出版社">
            <button class="btn btn-primary">查询</button>
        </div>
    </div>
    <div class="tgroup">
        <button class="btn btn-success" id="addbook"><span class="glyphicon glyphicon-plus"></span>添加</button>
    </div>


    <table class="layui-table" id="bktb" lay-filter="bktb">

    </table>


</div>
</body>
</html>
<script>

    function rDate(obj) {
        var d = {};
        for (var i = 0; i < obj.length; i++) {
            d[$(obj[i]).attr("name")] = $(obj[i]).val();
        }
        return d;
    }

    function setDate(obj, data) {
        for (var i = 0; i < obj.length; i++) {
            console.log($(obj[i]).attr("name"))
            $(obj[i]).val(data[$(obj[i]).attr("name")]);
        }
    }

    $(document).ready(function () {
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#bktb',
                url: '/libms/book/list',
                method: 'post',
                page: true,

                cols: [[
                    {field: 'name', title: '名称'},
                    {field: 'author', title: '作者'},
                    {field: 'publisher', title: '出版社'},
                    {field: 'edition', title: '版次'},
                    {field: 'num', title: '数量',},
                    {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo', title: '操作'}
                ]]


            });
            //监听工具条
            table.on('tool(bktb)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    // layer.alert('编辑行：<br>' + JSON.stringify(data))
                    setDate($(".bookinput"), data);
                    tc ("/libms/book/update");
                }
            });
        });


        $("#addbook").click(function () {
            tc("/libms/book/add");
        });

        function tc(url) {
            layer.open({
                type: 1,
                content: $('#bookmsg'),
                btn: ['确定', '取消'],
                btn1: function () {
                    var ac = false;
                    var d = $(".bookinput");
                    var data = rDate(d);
                    console.log(data);
                    $.ajax({
                        url: url,
                        type: 'post',
                        dataType: 'json',
                        data: data,
                        async: false
                    }).done(function (e) {
                        if (e.code == 1) {
                            ac = true;
                            table.reload("bktb")
                        } else {
                            alert(e.msg)
                        }
                        console.log("success");
                    })
                        .fail(function () {
                            alert("操作失败")
                        })
                        .always(function () {
                            console.log("complete");
                        });
                    return true;
                },
                end: function () {
                    $(".bookinput").val("");
                }

            });
        }
    });

</script>
<script type="text/html" id="barDemo">
    <!-- <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>